<template>
  <div class="content-section">
    <div class="content-section-title">在映影片</div>
    <div class="apps-card">
      <div class="item-apps-card">
        <div class="app-card" v-for="item in products" :key="item.filmName">
          <span><img :src="item.picture" /></span>
          <div class="app-card__subtext">{{ item.filmName }}</div>
          <div class="app-card-buttons">
            <button class="content-button status-button" @click="open(item.filmName,item.picture,item.director,item.scriptwriter,item.star,item.type,item.area,item.showDate,item.filmLength,item.wordCloud)">
              详情
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import router from "@/router";
export default {
  props: {
    products: {
      type: Array,
    },
  },
  methods: {
    open(filmName,picture,director,scriptwriter,star,type,area,showDate,filmLenght,wordCloud) {
      this.$router.push({ path: "/games/tictactoe", 
      // params: { filmName } 
                query: {
            filmname:filmName,
            picture:picture,
            director:director,
            scriptwriter:scriptwriter,
            star:star,
            type:type,
            area:area,
            showDate:showDate,
            filmL:filmLenght,
            wordCloud:wordCloud
          }, 
      });
      //  router.push({
      //     path: "/games/tictactoe",
      //     query: {
      //       cardNoFirst: "SS",
      //     }, 
      //   });
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  outline: none;
  box-sizing: border-box;
}

.content-section {
  margin-top: 0px;
  display: flex;
  flex-direction: column;
  color: #ebecec;
  &-title {
    color: #1e1e1f;
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 10px;
  }

  .apps-card {
    width: 100%;
    //background-color: greenyellow;

    .item-apps-card {
      display: flex;
      flex-wrap: wrap;
      margin-left: 10px;
      //background-color: blue;
      //opacity: 0.3;
    }
    .app-card {
      width: 290px;
      display: flex;
      flex-direction: column;
      // width: calc(25% - 10px);
      height: 360px;
      margin-right: 10px;
      font-size: 16px;
      background-color: rgba(186, 191, 217, 0.13);
      //background-color: yellow;
      border-radius: 14px;
      border: 1px solid rgba(16 18 27 / 10%);
      padding: 20px;
      margin-bottom: 10px;
      cursor: pointer;
      transition: 0.3s ease;

      &:hover {
        transform: scale(1.02);
        background-color: rgba(16 18 27 / 20%);
      }

      span {
        display: flex;
        align-items: center;
        height: 90px;
      }

      img {
        width: 110%;
        height: 310px;
        align-items: center;
        border-radius: 6px;
        margin-top: 190px;
        margin-left: -9px;
        flex-shrink: 0;
      }

      &__subtext {
        color: #000;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.6em;
        margin-top: 220px;
        border-bottom: 1px solid rgba(67, 71, 87, 0.25);
        //border-bottom: 1px solid red;


      }

      &-buttons {
        display: flex;
        align-items: center;
        margin-left: auto;
        margin-top: 5px;
        // margin-bottom: 10px;
        //margin-top: 10px;
      }

      @media screen and (max-width: 1110px) {
        width: calc(50% - 10px);
        &:last-child {
          //margin-top: 20px;
          margin-left: 0px;
        }
      }
      @media screen and (max-width: 565px) {
        width: calc(100% - 10px);
        margin-top: 10px;
        & + .app-card {
          margin-left: 0;
        }
      }
    }
  }
}

//下面是一些公用的样式

.content-button {
  background-color: #88a6f3;
  border: none;
  padding: 5px 15px;
  color: #fff;
  border-radius: 20px;
  margin-top: -40px;
  margin-right: -10px;
  cursor: pointer;
  transition: 0.3s;
  white-space: nowrap;
}

// start free trail
.content-button:not(.open):hover {
  background: #1e59f1;
}

.content-button-wrapper .content-button.status-button {
  width: auto;
}
</style>